<template>
    <view class="search-input flex-col">
        <view class="search-input-header flex-between-center p-l-20 p-r-20">
            <nut-input v-model="searchValue" class="search-input-input" clearable :border="false" placeholder="请输入汉字" />
            <IconFont name="search" size="24" class="m-l-20 m-r-20 search-icon p-10"></IconFont>
        </view>
        <view class="search-input-history" v-if="isEmpty">
            <view class="p-20 flex-between-center">
                <text> 历史记录</text>
                <text>
                    <IconFont name="del" size="18" class="del-icon"></IconFont>
                </text>
            </view>
            <view class="flex-start p-l-20 p-r-20">
                <nut-tag class="m-r-10" bindlongtap="mouseLongPress">标签</nut-tag>
                <nut-tag class="m-r-10" type="primary">收到回复就开始大幅说的话反馈及时答复标签</nut-tag>
                <nut-tag class="m-r-10" type="success">标签</nut-tag>
                <nut-tag class="m-r-10" type="danger">i顾客关于一个标签</nut-tag>
                <nut-tag class="m-r-10" type="warning">国与国标签</nut-tag>
            </view>
        </view>
        <view class="search-value" v-else></view>
    </view>
</template>
<script setup name="SearchInput">
definePageConfig({
    navigationBarTitleText: '',
})
import { IconFont } from '@nutui/icons-vue-taro';
import Taro from '@tarojs/taro'
import { ref, watchEffect } from 'vue';

const isEmpty = ref(true)
const searchValue = ref('')

watchEffect(() => {
    if (searchValue.value) {
        isEmpty.value = false
    } else {
        isEmpty.value = true
    }
})


</script>
<style lang="scss">
.search-input-input {
    background-color: #F3F5F8;
    border-radius: 12px;
    color: $color-actived;
    position: relative;

    &::after {
        content: '';
        width: 20px;
        height: 20px;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
}

.search-input {
    height: 100%;

    .search-input-header {
        height: 85px;
    }

    .search-input-history {
        // height: calc(100% - 85px);
        // background-color: red;
    }

    .search-value {
        flex: 1;
        background-color: red;
        height: 0;
    }
}

.search-icon {
    color: $color-base3;
}

.del-icon {
    color: $color-base3;
}
</style>